<template>
	<view class="container">
		<uni-card class="card-detail" is-full>
			出行登记
		</uni-card>		
		<view class="example">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="门牌号" name="dormitory" required>
					<uni-easyinput type="text" v-model="formData.dormitory" placeholder="例如 1-102" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phoneNumber" required>
					<uni-easyinput type="number" v-model="formData.phoneNumber" placeholder="手机号码" />
				</uni-forms-item>
				<uni-forms-item label="出行方式" name="traffic" required>
					<uni-easyinput type="text" v-model="formData.traffic" placeholder="例如:高铁G788" />
				</uni-forms-item>
				<uni-forms-item label="出行原因" name="reason" required>
					<uni-easyinput type="textarea" v-model="formData.reason" placeholder="请输入内容"/>
				</uni-forms-item>
				<uni-forms-item label="行程路线" name="line" required>
					<uni-easyinput type="textarea" v-model="formData.line" placeholder="详细的路线" />
				</uni-forms-item>
				<uni-forms-item label="目的地" name="address" required>
					<pickerAddress @change="change">
						{{value}}
					</pickerAddress>
				</uni-forms-item>
			</uni-forms>	
			<view class="action-btn">
			<button @click="submit('handleinput')" class="login-btn cu-btn block bg-blue lg round">确认</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {addLeaveinfo} from "@/api/leave/leaveinfo"
	import pickerAddress from '@/components/pickerAddress.vue'
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				value: "请选择地区",
				formData: {
				  dormitory: '',
				  phoneNumber: '',
				  reason: '',
				  traffic: '',
				  address: '',
				  line: '',
				  status: 0
				},
				loading: false,
				// 校验规则
				
				rules: {
					dormitory: {
						rules: [{
							required: true,
							errorMessage: '门牌号不能为空'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '出行原因不能为空'
						}]
					},
					traffic: {
						rules: [{
							required: true,
							errorMessage: '出行方式不能为空'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '目的地不能为空'
						}]
					},
					line: {
						rules: [{
							required: true,
							errorMessage: '行程路线不能为空'
						}]
					},
					phoneNumber:{
						rules: [{
							required: true,
							errorMessage: '请填写手机号码',
						},{
							validateFunction: function(rule, value, data ,callback) {
								let iphoneReg = (/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/); //手机号码
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
							}
						}]
					}
					
				},
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {


			change(data) {
				this.value = data.data.join('-')
				this.formData.address = this.value
			},
			 submit(){
				 this.$refs.form.validate().then(res => {
					 console.log(res)
					 addLeaveinfo(this.formData).then(data => {
						 console.log(data)
						 this.loading = true
						 if (data.code === 200) {
						 	console.log('1234567')
						     uni.showToast({
						 		title:'打卡成功',
								icon: 'none',
								duration: 2000
						     })
						 	//跳转页面
							setTimeout(() => {
							  uni.switchTab({
								url: '/pages/index'
							  })
							}, 1000)
						 }
						 
						 
					 }).catch(() => {
						 this.loading = false
					 })
				 }).catch(err =>{
					console.log('表单错误信息：', err);

				})	
				 
			 }
		}
	}
</script>

<style>
		.example {
			padding: 15px;
			background-color: #fff;
		}
       .card-detail{
		   font-size: 30rpx;
		   
		   text-align: center;
	   } 
	

</style>
